<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :scroll="{ x: 1500 }"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <span slot="orderNumber" slot-scope="text, record" class="order-number">
        <a
          @click="editRowData(record, 'info')"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
        >
          {{
            record.orderNumber === null || record.orderNumber === ""
              ? "暂无"
              : record.orderNumber
          }}
        </a>
        <span>
          <a-icon
            v-if="record.batchNo != null"
            style="font-size: 22px; color: #3eae7c"
            type="folder-add"
          />
          <a-icon
            v-if="record.batchNo === null"
            style="font-size: 22px; color: #ccc"
            type="folder"
          />
        </span>
      </span>
      <span slot="logisticsName" slot-scope="text, record">
        <div class="ect-no">
          <span>
            {{
              record.logisticsName === null || record.logisticsName === ""
                ? "暂无"
                : record.logisticsName
            }}
          </span>
          <span class="inventory">
            {{ record.sign === "1" ? "签" : "否" }}
          </span>
        </div>
      </span>
      <span slot="waybillNo" slot-scope="text, record">
        <div class="ect-no">
          <span>
            {{
              record.isEctn === "1"
                ? record.ectnNo
                : record.waybillNo === null
                ? "暂无"
                : record.waybillNo
            }}
          </span>
          <span class="inventorys">
            {{ record.isEctn === "1" ? "自" : "未" }}
          </span>
        </div>
      </span>
      <!-- 订单商品 -->
      <span slot="recordList" slot-scope="text, record">
        <span v-for="item in record.recordList" :key="item.key">
          {{ item.sku }}*{{ item.inputNumber }}<br />
        </span>
      </span>
      <!-- 订单处理费 -->
      <span slot="orderHandlingCharge" slot-scope="text, record">
        {{
          record.orderHandlingCharge === null ||
          record.orderHandlingCharge === ""
            ? "暂无"
            : record.orderHandlingCharge
        }}
      </span>
      <!-- 备注 -->
      <span slot="remark" slot-scope="text, record">
        {{
          record.remark === null || record.remark === ""
            ? "暂无"
            : record.remark
        }}
      </span>
      <span
        slot="state"
        slot-scope="text, record"
        :style="
          record.state === '暂缓处理'
            ? 'color:#ff9933'
            : record.state === '异常订单'
            ? 'color:#F3381D'
            : 'color:#3eae7c'
        "
      >
        {{ record.state
        }}<a-icon
          :style="
            record.addressVerify
              ? 'font-size:16px;'
              : 'font-size:16px;color:red'
          "
          type="environment"
        />
        <a-icon
          v-if="record.lengthNumber"
          style="font-size: 16px"
          type="check-circle"
        />
        <a-icon
          v-if="!record.lengthNumber"
          style="font-size: 16px; color: red"
          type="close-circle"
        />
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          :disabled="record.ectnNo != null"
          href="javascript:;"
          :style="
            record.ectnNo != null
              ? 'text-decoration: underline; color: #ccc'
              : 'text-decoration: underline; color: rgb(41, 41, 224)'
          "
          @click="packageTracking(record)"
          >包裹追踪
        </a>
      </span>
    </a-table>
    <a-modal v-model="traceVisible" title="包裹追踪">
      <template slot="footer">
        <a-button
          @click="traceVisible = false"
          style="background: #d7d7d7; border: none; color: #fff"
          >知道了</a-button
        >
      </template>
      <a-timeline>
        <span v-if="!recordArry">暂无信息！ </span>
        <a-timeline-item v-for="(item, i) in recordArry" :key="i">
          {{ item.message }} <br />
          {{ item.status }}<br />
          {{ item.datetime.substring(0, 19).replaceAll("T", "  ") }}
        </a-timeline-item>
      </a-timeline>
    </a-modal>
  </div>
</template>

<script>
import {
  OutBound_createWaybill,
  OutBound_tackTetrieve,
} from "@/apis/system/WM/OutOrder";
export default {
  props: ["tableData", "OutOrderKeys", "getOutOrderList"],
  data() {
    return {
      selectedRowKeys: [],
      traceVisible: false,
      recordArry: [],
    };
  },
  mounted() {
    this.$bus.$off("OutOrderSelectedKeys");
    this.$bus.$on("OutOrderSelectedKeys", () => {
      this.selectedRowKeys = [];
    });
  },
  methods: {
    //包裹追踪
    async packageTracking(packageTracking) {
      let { code, responseBody } = await OutBound_tackTetrieve(
        packageTracking.waybillNo
      );
      if (code === "200") {
        this.recordArry = responseBody.trackingDetails;
      }
      this.traceVisible = true;
    },
    //生成运单
    async createWaybill(record, flag) {
      if (flag === "waybill") {
        let arr = [];
        arr.push(record.key);
        let { code } = await OutBound_createWaybill(arr);
        if (code === "10000") {
          this.getOutOrderList();
        }
      }
    },
    // 表格checked框
    onSelectChange(selectedRowKeys, selectedRows) {
      // 传递给父亲
      this.$emit("selectedRowKeys", selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
    },
    editRowData(record, flag) {
      if (flag === "info") {
        setTimeout(() => {
          this.$bus.$emit("OutOrderRowData", record, flag);
        }, 50);
      }
    },
  },
  computed: {
    columns() {
      if (this.OutOrderKeys === "已发货") {
        return [
          {
            title: "订单编号",
            dataIndex: "orderNumber",
            align: "center",
            scopedSlots: { customRender: "orderNumber" },
            width: "12%",

            //  fixed: "left",
          },
          {
            title: "出库仓库",
            dataIndex: "warehouseName",
            align: "center",
            scopedSlots: { customRender: "warehouseName" },
            width: "9%",
          },
          {
            title: "客户编号",
            dataIndex: "tenantId",
            align: "center",
            width: "9%",
          },
          {
            title: "订单商品",
            dataIndex: "recordList",
            // ellipsis: true,
            scopedSlots: { customRender: "recordList" },
            align: "center",
            width: "13%",
          },
          {
            title: "物流商",
            dataIndex: "logisticsName",
            scopedSlots: { customRender: "logisticsName" },
            align: "center",
            width: "15%",
            // ellipsis: true,
          },
          {
            title: "物流单号",
            dataIndex: "waybillNo",
            scopedSlots: { customRender: "waybillNo" },
            align: "center",
            width: "15%",
            // ellipsis: true,
          },
          {
            title: "物流费用",
            dataIndex: "logisticsCost",
            scopedSlots: { customRender: "logisticsCost" },
            align: "center",
            width: "9%",
          },
          {
            title: "订单处理费",
            dataIndex: "orderHandlingCharge",
            scopedSlots: { customRender: "orderHandlingCharge" },
            align: "center",
            width: "9%",
          },

          {
            title: "更新时间",
            dataIndex: "updateTime",
            scopedSlots: { customRender: "updateTime" },
            align: "center",
            width: "9%",
          },
          {
            title: "订单状态",
            dataIndex: "state",
            align: "center",
            width: "12%",
            scopedSlots: { customRender: "state" },
            // ellipsis: true,
          },
          {
            title: "备注",
            dataIndex: "remark",
            scopedSlots: { customRender: "remark" },
            align: "center",
            width: "9%",
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            width: "9%",
          },
        ];
      } else {
        return [
          {
            title: "订单编号",
            dataIndex: "orderNumber",
            align: "center",
            scopedSlots: { customRender: "orderNumber" },
            width: "12%",

            //  fixed: "left",
          },
          {
            title: "出库仓库",
            dataIndex: "warehouseName",
            align: "center",
            scopedSlots: { customRender: "warehouseName" },
            width: "9%",
          },
          {
            title: "客户编号",
            dataIndex: "tenantId",
            align: "center",
            width: "9%",
          },
          {
            title: "订单商品",
            dataIndex: "recordList",
            // ellipsis: true,
            scopedSlots: { customRender: "recordList" },
            align: "center",
            width: "13%",
          },
          {
            title: "物流商",
            dataIndex: "logisticsName",
            scopedSlots: { customRender: "logisticsName" },
            align: "center",
            width: "15%",
            // ellipsis: true,
          },
          {
            title: "物流单号",
            dataIndex: "waybillNo",
            scopedSlots: { customRender: "waybillNo" },
            align: "center",
            width: "15%",
            // ellipsis: true,
          },
          {
            title: "物流费用",
            dataIndex: "logisticsCost",
            scopedSlots: { customRender: "logisticsCost" },
            align: "center",
            width: "9%",
          },
          {
            title: "订单处理费",
            dataIndex: "orderHandlingCharge",
            scopedSlots: { customRender: "orderHandlingCharge" },
            align: "center",
            width: "9%",
          },

          {
            title: "更新时间",
            dataIndex: "updateTime",
            scopedSlots: { customRender: "updateTime" },
            align: "center",
            width: "9%",
          },
          {
            title: "订单状态",
            dataIndex: "state",
            align: "center",
            width: "12%",
            scopedSlots: { customRender: "state" },
            // ellipsis: true,
          },
          {
            title: "备注",
            dataIndex: "remark",
            scopedSlots: { customRender: "remark" },
            align: "center",
            width: "12%",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.order-number {
  display: flex;
  justify-content: center;
  a {
    width: 80%;
  }
}
.ect-no {
  display: flex;
  justify-content: center;
  span:nth-child(1) {
    width: 60%;
  }
  span:nth-child(2) {
    // width: 40%;
    align-self: center;
  }
}
.inventory {
  margin-left: 5px;
  // margin-left: 3px;
  display: inline-block;
  width: 22px;
  height: 22px;
  // line-height: 22px;
  font-size: 12px;
  border: 1px solid #70a2c6;
  border-radius: 50%;
  background: #70a2c6;
  color: #fff;
  text-align: center;
}
.inventorys {
  // margin-left: 3px;
  display: inline-block;
  width: 22px;
  line-height: 22px;
  font-size: 12px;
  border: 1px solid rgb(148, 200, 84);
  border-radius: 50%;
  background: rgb(148, 200, 84);
  color: #fff;
  text-align: center;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
</style>